// import video from  '../video/video.mp4'
import {Video,Button, Util} from '../dComponent'
import {useState} from 'react'
let videos = [{
        title:'《说书人》- 钟离',
        url:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-479328cb-417a-467c-9512-83793cb72c1e/0fba1c36-9ecc-41af-b3c3-acdb470a1fa2.mp4'
    },{
        title:'《神女劈观》- 云堇',
        url:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-479328cb-417a-467c-9512-83793cb72c1e/5dc097b9-c4e9-4a7c-8b66-23eb6062bc79.mp4'
    }
]
function Pvideo(props){
    let [url, setUrl] = useState('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-479328cb-417a-467c-9512-83793cb72c1e/0fba1c36-9ecc-41af-b3c3-acdb470a1fa2.mp4')
    let [title, setTitle] = useState('《说书人》- 钟离')
    let [index, setIndex] = useState(0)
    let [videoarr] = useState(videos)
    return(
        <div className="page" style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
            <div className="flexBox" style={{width:`${Util.isMobile()?'100%':'70%'}`,display:'flex',justifyContent:'center'}}>
                <Video
                    src={url}
                    autoPlay
                    controls
                    title={title}
                    next={()=>{
                        let nextIndex = (index + 1 === videoarr.length) ? 0 : index + 1
                        // console.log(nextIndex)
                        setTitle(videoarr[nextIndex].title);
                        setUrl(videoarr[nextIndex].url);
                        setIndex(nextIndex)
                    }}
                />
            </div>
            <br/>

            <div className="flexBox" style={{display:'flex',justifyContent:'center'}}>
            <h2>切换视频源</h2>
                {videoarr.map((val, idx)=>{
                    return(
                        <Button 
                            style={{
                                margin:'25px'
                            }}
                            onClick={(e)=>{
                                setUrl(val.url)
                                setTitle(val.title)
                                setIndex(idx)
                            }}
                            key={val.title}
                        >
                            {val.title}
                        </Button>
                    )
                })}
            </div>
        </div>
    )
}
export default Pvideo